<template>
	<view>
		<view class="search flex-ac-jc">
			<gui-search @inputting="inputting" @confirm="handleSearch" @clear="clear" placeholder="输入关键字，搜索您想要的"
				placeholder-class="plStyle" borderRadius="15rpx" iconColor="#FF7272" class="flex1"></gui-search>
		</view>
		<view class="search-place"></view>
		<view class="content">
			<view class="tool-box bgfff radius15" v-for="(item,index) in dataList" :key="item.id" >
				<view class="title-line flex-ac">
					<view class="line"></view>
					<text>{{item.name}}</text>
				</view>
				<view class="tool-list flex-ac-wrap">
					<view class="item flex-dc-ac" @tap="goLink(item2)" v-for="(item2,index2) in item.modularList" :key="item2.id">
						<image :src="item2.icon" mode="heightFix" style="width: auto;"></image>
						<text class="qoverDot f26 c333">{{item2.name}}</text>
					</view>
				</view>
			</view>
			<gui-empty v-if="noData">
				<view slot="img" class="gui-flex gui-rows gui-justify-content-center">
					<!-- 请根据您的项目要求制作并更换为空图片 -->
					<image class="gui-empty-img" src="../../static/noImg.png" mode="widthFix"></image>
				</view>
				<text slot="text" class="gui-text-small gui-block-text gui-text-center gui-margin-top"
					style="color:#9DABFF;">暂无数据...</text>
			</gui-empty>
		</view>
		<!-- 居中弹出 -->
		<gui-popup ref="guipopup" width="480rpx">
			<view class="gui-relative gui-box-shadow bgfff popup radius15 f26">
				<view class="close-btn gui-icons bold flex-ac-je c999" @tap="handleClose()">&#xe610;</view>
				<view class="popup-con flex-dc-ac">
					<text class="bold title f28">温馨提示</text>
					<image class="popup-img" src="../../static/index/vipTip.png" mode="widthFix" style="height: auto;">
					</image>
					<text>使用工具功能</text>
					<text class="primary-color">请先充值成为会员</text>
					<view class="saveBtn" @tap="goPay">立即充值</view>
				</view>

			</view>
		</gui-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				did: '',
				searchKey: '',
				dataList: [],
				noData: false
			}
		},
		onLoad(options) {
			console.log('vuex_userInfo', this.vuex_userInfo);
			this.did = options.id ? options.id : ''
			if (this.did) this.getList()

		},
		methods: {
			goPay(){
				this.handleClose()
				this.$u.to('/pages/user/vipRecharge')
			},
			handleOpen: function() {
				this.$refs.guipopup.open();
			},
			handleClose: function() {
				this.$refs.guipopup.close();
			},
			goLink(item) {
				// this.$u.to(`/pages/index/openWeapp?appId=wx21c7506e98a2fe75`)
				// return;
				if (this.vuex_userInfo.isVip == 1) {
					this.$u.to('/pages/index/codeLogin?id=' + item.id)
				} else {
					this.handleOpen()
				}
			},
			inputting(e) {
				console.log(e);
				this.searchKey = e
				if(!e){
					this.getList()
				}
			},
			handleSearch() {
				this.getList()
			},
			clear(){
				this.searchKey =''
				this.getList()
			},
			getList() {
				this.$http.get('/api/modular', {
					synthesisId: this.did,
					name: this.searchKey
				}).then(res => {
					let result = res.data
					console.log('列表', result)
					this.dataList = result
					this.noData = result.length ? false : true
				})
			}
		}
	}
</script>

<style lang="less">
	.popup {
		position: relative;
		padding: 52rpx 80rpx 45rpx 80rpx;

		.close-btn {
			position: absolute;
			right: 0;
			top: 0;
			width: 100rpx;
			height: 60rpx;
			padding-right: 20rpx;
		}

		.popup-con {
			.title {}

			.popup-img {
				width: 215rpx;
				margin: 20rpx 0 30rpx 0;
			}

			.saveBtn {
				width: 269rpx;
				height: 64rpx;
				font-size: 24rpx;
				margin-top: 36rpx;
			}
		}
	}

	.search {
		position: fixed;
		left: 0;
		right: 0;
		z-index: 2;
		background: linear-gradient(180deg, #FF7272 0%, #FF0019 100%);
		height: 100rpx;
		padding: 0 34rpx;
	}

	.search-place {
		height: 100rpx;
	}

	.content {
		padding: 0 30rpx 20rpx 30rpx;
	}

	.tool-box {
		margin-top: 20rpx;

		.title-line {
			padding: 25rpx 0 25rpx 20rpx;
			border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		}

		.tool-list {
			padding: 0 20rpx;
			margin-top: 40rpx;

			.item {
				width: 216rpx;
				padding: 0 5rpx;
				margin-bottom: 32rpx;

				image {
					height: 90rpx;
					margin-bottom: 12rpx;
				}
			}
		}
	}
</style>